import React, { useEffect } from "react";
import * as echarts from "echarts";
const Index = () => {
    const EXS = () => {
        const chartDom = document.getElementById("main1");
        const myChart = echarts.init(chartDom);
        let option;

        // eslint-disable-next-line prefer-const
        option = {
            title: {
                text: '数据分析',
            },
            tooltip: {
                trigger: 'axis',
                icon:'circle'
            },
            legend: {
                data: [ '新增总表单(份)',  '新增被浏览(次)'],
                bottom: '0'
            },
            grid: {
                left: '10%',
                right: '2%',
                bottom: '13%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: ['09-16', '09-17', '09-18', '09-19', '09-20', '09-21', '09-22']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增总表单(份)',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0]
                },
                {
                    name: '新增被浏览(次)',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0]
                }
            ]
        };


        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        option && myChart.setOption(option);
    };
    useEffect(() => {
        EXS();
    }, []);
    return (
        <div>
            <div id="main1" style={{ width: "700px", height: "280px" }}></div>
        </div>
    );
};

export default Index;
